<template>
    <el-dialog v-model="dialogVisible" width="1800px">
        <p>查看座位图</p>
        <div class="content">
            <div class="left_circle">
                <!--核心区-->
                <div class="A" @click="choose">
                    <ul>
                        <li v-for="item in AList" :class="{active:activeIndex===item.id}" @click="choose(item)">
                            <div class="inner" :style="{width: 5*item.count+'px' }" @click=choose>
                                <span v-if="activeIndex!==item.id"> A{{item.id}}区</span>

                            </div>

                            <div class="iii" v-if="activeIndex===item.id">剩{{item.count}}张</div>

                        </li>
                    </ul>
                </div>
                <div class="B">
                    <ul>
                        <li v-for="item in BList" :class="{active:activeIndex===item.id}" @click="choose(item)">
                            <div class="inner" :style="{width: 5*item.count+'px' }">
                                <span>B{{item.id-4}}区</span>
                            </div>
                            <div class="iii" v-if="activeIndex===item.id">剩{{item.count}}张</div>
                        </li>
                    </ul>
                </div>
                <div class="C">
                    <ul>
                        <li v-for="item in CList" :class="{active:activeIndex===item.id}" @click="choose(item)">
                            <div class="inner" :style="{width: 5*item.count+'px' }">
                                <span> C{{item.id-12}}区</span>
                            </div>
                            <div class="iii" v-if="activeIndex===item.id">剩{{item.count}}张</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pass_right">
                <img class="logo" src="https://img.alicdn.com/tfs/TB1fbVFfu3tHKVjSZSgXXX4QFXa-230-104.png" alt="">
                <ul>
                    <li v-for="item in districtList"><span> ￥ {{item.price}}</span></li>
                </ul>
            </div>
        </div>
        <div class="detail_box">
            <p> 已选择区域</p>
            <div class="detail" v-if="activeIndex!==0">
                <ul>
                    <li>编号:<i>{{pass.name}}{{pass.id}}</i></li>
                    <li>单价:<i>￥{{pass.price}}</i></li>
                    <li>剩余票数:<i>{{pass.count}}</i></li>
                    <li>购买票数:
                        <i>
                            <el-input-number v-model="buyCount" :min="1" :max="pass.count"
                                             @change="buyTicket"></el-input-number>
                        </i>
                    </li>
                    <li>总金额:<i>￥{{buyCount*pass.price}}</i></li>
                </ul>
                <el-button type="primary" class="btn" @click="save">立即订票</el-button>
            </div>
        </div>
    </el-dialog>
    <el-button type="primary" @click="buyTicket" class="checkSeats">查看座位图</el-button>


</template>

<script setup>

    import {ref, reactive, onMounted} from "vue"
    import axios from 'axios'
    import {ElMessage} from 'element-plus';
    import {useRouter, useRoute} from 'vue-router'

    import {useUserStore} from "@/stores/user.js";

    const userStore = useUserStore()

    const router = useRouter()
    const route = useRoute()

    const passList = ref([])
    onMounted(() => {
        getPass()
    })
    const AList = ref([])
    const BList = ref([])
    const CList = ref([])
    const getPass = async () => {
        axios.defaults.headers.common['token'] = sessionStorage.getItem('token')

        const res = await axios.get('/pass/list?vocalcontenId=' + 1)
        passList.value = res.data
        AList.value = passList.value.filter(pass => pass.districtId === 1)
        BList.value = passList.value.filter(pass => pass.districtId === 2)
        CList.value = passList.value.filter(pass => pass.districtId === 3)

    }
    const dialogVisible = ref(false)

    const handlePass = () => {
        dialogVisible.value = true
        getDistrict()
    }

    const districtList = ref([])

    const getDistrict = async () => {
      axios.defaults.headers.common['token'] = sessionStorage.getItem('token')

        const res = await axios.get('/pass/districeList')
        districtList.value = res.data
    }

    const isChoose = ref(false)

    const activeIndex = ref(0)

    const pass = ref({})

    const choose = async (item) => {
        passList.value.forEach(async function (i) {
            if (i.id === item.id) {
                isChoose.value = !isChoose.value
                activeIndex.value = item.id
              axios.defaults.headers.common['token'] = sessionStorage.getItem('token')

                const res = await axios.get('/pass/findById?id=' + activeIndex.value)
                pass.value = res.data
                if (pass.value.name === 'B') pass.value.id = pass.value.id - 4
                if (pass.value.name === 'C') pass.value.id = pass.value.id - 12
                buyCount.value = 1
            }
        })

    }

    const buyCount = ref(1)


    const buyTicket = async () => {
        dialogVisible.value = true

    }

    const orderDto = ref({})


    const save = async () => {
        orderDto.value.userId = userStore.user.id
        if (pass.value.name === 'B') pass.value.id = pass.value.id + 4
        if (pass.value.name === 'C') pass.value.id = pass.value.id + 12
        orderDto.value.passId = pass.value.id
        orderDto.value.num = buyCount.value
        orderDto.value.total = Number(pass.value.price) * buyCount.value


        if( pass.value.count  -  orderDto.value.num  < 0){
            ElMessage.error('该通道已票数不足，换个通道吧')
            return
        }

       const res = await axios.post('/orders/sale', orderDto.value)

        if(res.data === 0){
            ElMessage.error('该通道票数不足，换个通道吧')
            return
        }

        ElMessage.success('购票成功')
        buyCount.value = 1
        dialogVisible.value = false
        getPass()
         alert(res.data)
        router.push('/pay?fee='+orderDto.value.total+'&orderNo='+res.data)
        orderDto.value={}

    }



</script>

<style scoped lang="scss">


    .checkSeats{
        background-color: #FF2D79;
        border: none;
        width: 80px;
    }



    ul {
        li {
            list-style-type: none;
        }
    }

    .content {
        width: 1200px;
        height: 800px;
        margin-left: 200px;
        // background-color: skyblue;
        display: flex;
    }

    .pass_right {
        position: relative;
        left: 150px;

        img {
            width: 80px;
        }

        ul {
            li {
                position: relative;
                right: 50px;
                list-style-type: none;
                width: 80px;
                height: 40px;
                background-color: skyblue;
                margin-bottom: 10px;

                span {
                    position: absolute;
                    right: -85px;
                    top: 10px;
                    font-size: 20px;
                }


            }

            li:first-child {
                background-color: #FF4041;
            }

            li:first-child {
                background-color: #FF4041;
            }

            li:nth-child(2) {
                background-color: #4BC08F;
            }
        }

    }


    .left_circle {
        position: relative;
        background-color: red;
        height: 800px;
        width: 1200px;
        z-index: 2;
        background-image: url(@/assets/images/bgc.jpg);
        background-position: bottom 100px;
        background-size: cover;
        background-repeat: no-repeat;


        .A {
            position: absolute;
            left: 600px;
            top: 285px;

            ul {
                li {
                    margin-right: 20px;
                    margin-bottom: 20px;
                    width: 50px;
                    height: 40px;
                    background-color: gray;

                    .inner {
                        background-color: #FF4041;
                        width: 50px;
                        height: 40px;
                        color: black;
                        font-weight: 600;
                        text-align: center;
                        line-height: 40px;

                        span {
                            position: absolute;
                            left: 49px;
                        }

                    }

                }
            }
        }
    ;


        .B {
            position: absolute;
            left: 480px;
            top: 151px;

            ul {
                li {
                    margin-right: 20px;
                    margin-bottom: 20px;
                    width: 100px;
                    height: 40px;
                    background-color: gray;

                    .inner {
                        background-color: #4BC08F;
                        width: 80px;
                        height: 40px;
                        color: black;
                        font-weight: 600;
                        text-align: center;
                        line-height: 40px;

                        span {
                            position: absolute;
                            left: 65px;
                        }


                    }

                }
            }
        }
    ;


        .C {
            position: absolute;
            left: 264px;
            top: 112px;

            ul {

                li {
                    margin-right: 20px;
                    margin-bottom: 10px;
                    width: 200px;
                    height: 40px;
                    background-color: gray;

                    .inner {
                        background-color: #87CEEB;
                        width: 200px;
                        height: 40px;
                        color: black;
                        font-weight: 600;
                        text-align: center;
                        line-height: 40px;

                        span {
                            position: absolute;
                            left: 123px;
                        }

                    }

                }
            }
        }
    ;


        .active {
            border: 5px solid #FF2D79;
            transform: scale(1.1);
            box-shadow: 0 0 10px #fff;

        }


        .iii {
            position: absolute;
            color: black;
            font-weight: 600;
            font-size: 14px;
            bottom: 10px;
        }


    }

    p {
        font-size: 25px;
        font-weight: 600;
        color: black;
    }

    .detail {

        margin-top: 50px;
        margin-right: 30px;

        li {
            margin-bottom: 20px;
            font-size: 23px;
            font-weight: 500;

            i {
                margin-left: 20px;
                color: #FF2D79;
            }
        }

    }

    .detail_box {
        display: flex;
    }

    .btn {
        background-color: #FF2D79;
        border: none;
        margin-left: 40px;
    }



</style>
